<template>
    <div>
        <div id="queryDiv" style="z-index: 999;display: inline-block;
    position: relative;height: 50px">
            <span style="margin-left: 10px;vertical-align: middle">地名地址查询</span>
            <el-select v-model="state1" placeholder="请输入地名" style="margin: 8px 8px 5px 5px;height: 30px;"
                       filterable
                       :filter-method="querySearch"
                       @change="GotoPositon(state1)">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <i class="el-icon-delete" style="margin-right:8px" @click="clearSearch()"></i>
            <!--<el-button type="primary" icon="el-icon-search" style="margin: 5px 5px 0px" @click="querySearch">搜索</el-button>-->
        </div>
        <div ref="basicMapbox" style="position: absolute;height: 94%;width: 81%;top: 60px; " id="map"></div>
        <spatialQueryDialog style="position:absolute; bottom: 0; right: 0"></spatialQueryDialog>
    </div>
</template>
<script>
    import mapboxgl from "mapbox-gl"
    import MapboxLanguage from '@mapbox/mapbox-gl-language'
    import 'mapbox-gl/dist/mapbox-gl.css'
    import MapboxDraw from '../../../static/js/mapbox-gl-draw.js'
    import {
        booleanPointInPolygon,
        booleanWithin,
        bbox,
        getGeom,
        point,
        polygon,
        booleanDisjoint
    } from '../../../static/js/turf.min'

    // import global from "../global.vue";
    import spatialQueryDialog from '../../components/SpatialQueryDialog'

    export default {
        data() {
            return {
                options: [],
                state1: '',
                layerInfo: [],
                layerStyle: [],
                currentLayer: "",
                popUp: new mapboxgl.Popup({
                    offset: {},
                    // className: 'my-class',
                    closeOnClick: false
                }),
                // draws: []
                mymap: ''
            }
        },
        components: {
            spatialQueryDialog
        },

        mounted() {
            // this.restaurants = this.loadAll();
            this.init();
        },
        methods: {
            clearSearch() {
                this.state1 = "";
                if (this.$globalConstant.map.getLayer("templayer")) {
                    this.$globalConstant.map.removeLayer("templayer");
                    this.$globalConstant.map.removeSource("templayer");
                }
            },
            handleSelect(item) {
                alert(item);
            },
            GotoPositon(state1) {
                for (let option of this.options) {
                    if (option.value === state1) {
                        // let bd = option.bound.split(',');
                        // let item1 = [parseFloat(bd[0]), parseFloat(bd[1])];
                        // let item2 = [parseFloat(bd[2]), parseFloat(bd[3])];
                        // let bbox = [item1, item2];
                        // console.log(bbox);
                        // this.$globalConstant.map.fitBounds(bbox);
                        this.searchByCode(option.value);
                    }
                }
            },
            querySearch(queryString) {
                let tk = "0b3acb7c7e906cbc49bfae048ce80ca2";
                let searchParam = {
                    "searchWord": queryString,
                    "searchType": "1",
                    "needSubInfo": "false",
                    "needAll": "false",
                    "needPolygon": "false",
                    "needPre": "true"
                };
                let urlpre = "http://api.tianditu.gov.cn/administrative?postStr=" + JSON.stringify(searchParam);
                let urlex = "&tk=" + tk;
                let url = urlpre + urlex;
                let that = this;
                this.$axios.simpleGet(url)
                    .then(function (res) {
                        if (res.returncode === '100') {
                            let resultList = [];
                            for (let item of res.data) {
                                if (item.adminType === 'province') {
                                    resultList.push({
                                        value: item.cityCode,
                                        label: item.parents.country.name + ":" + item.name,
                                        // bound: item.bound
                                    })
                                } else if (item.adminType === 'county') {
                                    resultList.push({
                                        value: item.cityCode,
                                        label: item.parents.province.name + ":" + item.name,
                                        // bound: item.bound
                                    })
                                } else if (item.adminType === 'city') {
                                    resultList.push({
                                        value: item.cityCode,
                                        label: item.parents.province.name + ":" + item.name,
                                        // bound: item.bound
                                    })
                                } else if (item.adminType === 'country') {
                                    resultList.push({
                                        value: item.cityCode,
                                        label: item.name,
                                        // bound: item.bound
                                    })
                                }
                            }
                            that.options = resultList;
                            // that.$forceUpdate();
                        } else {
                            // cb(that.restaurants)
                        }

                    }).catch(function (error) {
                    console.log(error);
                });

            },
            searchByCode(id) {
                let that = this;
                let tk = "0b3acb7c7e906cbc49bfae048ce80ca2";
                let searchParam = {
                    "searchWord": id,
                    "searchType": "0",
                    "needSubInfo": "false",
                    "needAll": "false",
                    "needPolygon": "true",
                    "needPre": "false"
                };
                let urlpre = "http://api.tianditu.gov.cn/administrative?postStr=" + JSON.stringify(searchParam);
                let urlex = "&tk=" + tk;
                let url = urlpre + urlex;
                this.$axios.simpleGet(url)
                    .then(function (res) {
                        // let bounds = [];
                        // let lonlat = res.data.bound.split(",");
                        // for(let i of lonlat)
                        // {
                        //     bounds.push(i);
                        // }
                        // that.$globalConstant.map.fitBounds(bounds);
                        // that.$message({
                        //     type: 'warning',
                        //     message: res.data.points[0].region
                        // });
                        let bd = res.data.bound.split(',');
                        let item1 = [parseFloat(bd[0]), parseFloat(bd[1])];
                        let item2 = [parseFloat(bd[2]), parseFloat(bd[3])];
                        let bbox = [item1, item2];
                        console.log(bbox);
                        that.$globalConstant.map.fitBounds(bbox);
                        if (that.$globalConstant.map.getLayer("templayer")) {
                            that.$globalConstant.map.removeLayer("templayer");
                            that.$globalConstant.map.removeSource("templayer");
                        }
                        let coordinates = [];
                        let c1 = res.data.points[0].region.split(',');
                        for (let i = 0; i < c1.length; i++) {
                            let c2 = c1[i].split(' ');
                            let cc = [parseFloat(c2[0]), parseFloat(c2[1])];
                            coordinates.push(cc)
                        }
                        that.$globalConstant.map.addLayer({
                            "id": 'templayer',
                            "source": {
                                "type": "geojson",
                                'data': {
                                    'type': 'Feature',
                                    'geometry': {
                                        'type': 'Polygon',
                                        'coordinates': [
                                            coordinates
                                        ]
                                    }
                                }
                            },
                            "type": "line",
                            'paint': {
                                // 'fill-color': '#088',
                                // 'fill-opacity': 0.8,
                                "line-color": "red"
                            }
                        }, 'gl-draw-polygon-fill-inactive.cold');
                    }).catch(function (error) {
                    console.log(error);
                });
            },

            //北京地名查询代码
            // GotoPositon(state1) {
            //     for (let option of this.options) {
            //         if (option.label === state1) {
            //             this.querySearch(option.label);
            //         }
            //     }
            // },
            // querySearch(queryString) {
            //     let tk = "2ce94f67e58faa24beb7cb8a09780552"
            //     let searchParam = {
            //         "keyWord": queryString,
            //         "yingjiType":1,
            //         "queryType": 1,
            //         "sourceType":0,
            //         "start":0,
            //         "count":10,
            //         "mapBound":"73.49,16.82,134.78,53.57",
            //         "queryTerminal":10000,
            //         "level":9
            //     };
            //     let urlpre = "http://10.2.24.162/search?postStr=" + JSON.stringify(searchParam);
            //     let urlex = "&tk=" + tk+"&type=query";
            //     // let urlex = "&tk=" ;
            //     let url = urlpre + urlex;
            //     let that = this;
            //     this.$axios.simpleGet(url)
            //         .then(function (res) {
            //             // debugger
            //             if(res.resultType===1){
            //                 let resultList = [];
            //                 for (let item of res.prompt) {
            //                     if(item.type===3){
            //                         for (let rr of item.admins){
            //                             resultList.push({
            //                                 value: rr.name,
            //                                 label: rr.name,
            //                                 // bound: item.bound
            //                             })
            //                         }
            //
            //                     }
            //                 }
            //                 that.options = resultList;
            //             }else if((res.resultType===3)){
            //                 let resultList = [];
            //
            //                 resultList.push({
            //                     value: res.area.name,
            //                     label:  res.area.name,
            //                     // bond: item.bound
            //                 })
            //                 that.options = resultList;
            //                 let bd = res.area.bound.split(',');
            //                 let item1 = [parseFloat(bd[0]), parseFloat(bd[1])];
            //                 let item2 = [parseFloat(bd[2]), parseFloat(bd[3])];
            //                 let bbox = [item1, item2];
            //                 console.log(bbox);
            //                 that.$globalConstant.map.fitBounds(bbox);
            //                 if(that.$globalConstant.map.getLayer("templayer")){
            //                     that.$globalConstant.map.removeLayer("templayer");
            //                     that.$globalConstant.map.removeSource("templayer");
            //                 }
            //                 let coordinates=[];
            //                 let c1=res.area.points[0].region.split(',');
            //                 for(let i=0;i<c1.length;i++){
            //                     let c2=c1[i].split(' ');
            //                     let cc=[parseFloat(c2[0]),parseFloat(c2[1])];
            //                     coordinates.push(cc)
            //                 }
            //                 that.$globalConstant.map.addLayer({
            //                     "id": 'templayer',
            //                     "source": {
            //                         "type": "geojson",
            //                         'data': {
            //                             'type': 'Feature',
            //                             'geometry': {
            //                                 'type': 'Polygon',
            //                                 'coordinates': [
            //                                     coordinates
            //                                 ]
            //                             }
            //                         }
            //                     },
            //                     "type": "line",
            //                     'paint': {
            //                         // 'fill-color': '#088',
            //                         // 'fill-opacity': 0.8,
            //                         "line-color":"black",
            //                         "line-width":5
            //                     }
            //                 }, 'gl-draw-polygon-fill-inactive.cold');
            //
            //
            //             }else{
            //
            //             }
            //
            //
            //         }).catch(function (error) {
            //         console.log(error);
            //     });
            //
            // },


            // 初始化
            init() {
                let that = this;
                mapboxgl.accessToken = 'pk.eyJ1IjoibGl5dWV5aSIsImEiOiJjanpkZmh1aGswMW91M3Bsa2ZxZmFpNGtjIn0.3O_iLJM7u3UyEyGBVKt1ug';
                this.$globalConstant.map = {};
                this.$globalConstant.map = new mapboxgl.Map({
                    container: "map",
                    style: 'mapbox://styles/mapbox/streets-v9',
                    // style: {
                    //     "version": 8,
                    //     "sources": {
                    //         "raster-tiles": {
                    //             "type": "raster",
                    //             // "tiles": ["http://10.2.24.163/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=fb1bfb9e06cd7681813a42f4c934e1ea"],
                    //             "tiles": ["http://192.168.1.5:9600/dbfg/tileservice/pic/{z}/{x}/{y}"],
                    //             "tileSize": 256,
                    //         }
                    //     },
                    //     "layers": [{
                    //         "id": "simple-tiles",
                    //         "type": "raster",
                    //         "source": "raster-tiles",
                    //         "minzoom": 0,
                    //         "maxzoom": 22
                    //     }]
                    // },
                    center: [121.64, 29.70],
                    zoom: 4
                });

                // 设置语言
                let language = new MapboxLanguage({defaultLanguage: "zh"});
                that.$globalConstant.map.addControl(language);
                // 地图导航
                let nav = new mapboxgl.NavigationControl();
                that.$globalConstant.map.addControl(nav, "top-right");
                // 比例尺
                let scale = new mapboxgl.ScaleControl({
                    maxWidth: 80,
                    unit: "imperial"
                });
                that.$globalConstant.map.addControl(scale);
                scale.setUnit("metric");
                // 全屏
                that.$globalConstant.map.addControl(new mapboxgl.FullscreenControl());


                //设置鼠标样式
                this.$globalConstant.map.getCanvas().style.cursor = 'default';

                class Map2img {
                    constructor(html) {
                        this._html = html; // 初始化接收要显示的html
                    }

                    onAdd(map) {
                        this._map = map;
                        const el = document.createElement("div");
                        el.innerHTML = this._html
                        this.bindEvent(el) // 添加点击事件
                        return el // 返回这个传入的html
                    }

                    onRemove(map) {
                        this.container.parentNode.removeChild(this.container);
                        this._map = null;
                        return this
                    }

                    bindEvent(el) {
                        el.addEventListener("click", () => {
                            that.$Bus.$emit("tilesVisible", true)
                        })
                    }
                }

                let eltemp = `<div style="width:30px;height:30px;text-align: center;cursor: pointer;align-content: center" class=" mapboxgl-ctrl mapboxgl-ctrl-group"><img src="../../../static/img/4.png" style="width: 30px;height: 30px"/></div>`
                var tilesCtrl = new Map2img(eltemp)
                that.$globalConstant.map.addControl(tilesCtrl, 'top-right');


                let draw = new MapboxDraw({
                    displayControlsDefault: false,
                    controls: {
                        polygon: true,
                        point: true,
                        trash: true
                    }
                });
                that.$globalConstant.map.addControl(draw);
                that.$globalConstant.map.on('load', function () {
                    that.popUp.remove();
                    that.$globalConstant.map.addLayer({
                        "id": "TDT_Raster",
                        "type": "raster",
                        "source": {
                            "type": "raster",
                            "tiles": ["https://t3.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=0b3acb7c7e906cbc49bfae048ce80ca2"],
                            "tileSize": 256,
                        },
                    }, 'gl-draw-polygon-fill-inactive.cold');
                    that.$globalConstant.map.addLayer({
                        "id": "TDT_Terra",
                        "type": "raster",
                        "source": {
                            "type": "raster",
                            "tiles": ["https://t4.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=0b3acb7c7e906cbc49bfae048ce80ca2"],
                            "tileSize": 256,
                        },
                    }, 'gl-draw-polygon-fill-inactive.cold');

                    that.$globalConstant.map.setLayoutProperty("TDT_Raster", "visibility", "none");
                    that.$globalConstant.map.setLayoutProperty("TDT_Terra", "visibility", "none");

                    if (that.$globalConstant.mapUrl.length !== 0 && that.$globalConstant.ifLogin==1) {
                        for (let layer of that.$globalConstant.mapUrl) {
                            console.log(layer);
                            console.log(that.$globalConstant.map);
                            that.$globalConstant.map.addLayer({
                                "id": layer.id,
                                "type": "raster",
                                "source": {
                                    "type": "raster",
                                    "tiles": [layer.url],
                                    "tileSize": 256,
                                },
                            });
                        }
                        let bd = that.$globalConstant.mapUrl[0].bounds.split(',');
                        let item1 = [parseFloat(bd[0]), parseFloat(bd[2])];
                        let item2 = [parseFloat(bd[1]), parseFloat(bd[3])];
                        let bbox = [item1, item2];
                        console.log(bbox);
                        that.$globalConstant.map.fitBounds(bbox);
                    }
                    that.$globalConstant.ifLogin=1;
                });
                that.$globalConstant.map.on('draw.create', createArea);
                that.$globalConstant.map.on('draw.delete', deleteArea);
                that.$globalConstant.map.on('draw.update', updateArea);
                that.$globalConstant.map.on('draw.selectionchange', showSelectedTable);

                function showSelectedTable(e) {
                    //    判断点是否在多边形内
                    // if (that.draws.length !== 0) {
                    // for(let i of that.draws){
                    //     let ex_tent = polygon([i.features[0].geometry.coordinates[0]]);
                    //     let currentPoint = point([e.lngLat.lng,e.lngLat.lat]);
                    //     if(booleanPointInPolygon(currentPoint,ex_tent)){

                    if (that.currentLayer.indexOf("ES")==-1 && that.currentLayer !== '') {
                        that.$message({
                            message: "不能查看tiff数据切出来的瓦片服务信息",
                            type: 'info'
                        });
                    } else {
                        if (e.features.length !== 0) {
                            if (e.features[0].geometry.type !== "Point") {
                                let param = [];
                                for (let coordinate of e.features[0].geometry.coordinates[0]) {
                                    let pam = {
                                        lon: coordinate[0],
                                        lat: coordinate[1]
                                    };
                                    param.push(pam)
                                }
                                if (that.currentLayer !== '') {
                                    let url = that.$URL.mapAreaQueryUrl + that.currentLayer.substring(3,that.currentLayer.length);
                                    that.$axios.post(url, param)
                                        .then(function (res) {
                                            if (res.code === 200) {
                                                let dataList = res.body;
                                                let tableData = [];
                                                for (let i = 0; i < dataList.length; i++) {
                                                    let item = dataList[i]["att"];
                                                    item.geom = dataList[i]["geom"];
                                                    tableData.push(item);
                                                }
                                                that.$Bus.$emit('showTableDialog', true, tableData);
                                            }
                                        }).catch(function (error) {
                                        console.log(error);
                                    });
                                } else {
                                    that.$message({
                                        type: 'warning',
                                        message: "请选择查询图层！"
                                    })
                                }
                            } else {
                                if (that.currentLayer !== '') {
                                    that.popUp.remove();
                                    let url = that.$URL.mapIdentifyQueryUrl + that.currentLayer.substring(3,that.currentLayer.length) + "?lon=" + e.features[0].geometry.coordinates[0] + "&lat=" + e.features[0].geometry.coordinates[1];
                                    that.$axios.post(url)
                                        .then(function (res) {
                                            if (res.code === 200) {
                                                let feature = JSON.parse(res.body.geom);

                                                if (that.$globalConstant.map.getLayer("temp2")) {
                                                    that.$globalConstant.map.removeLayer('temp2');
                                                    that.$globalConstant.map.removeSource('temp2');
                                                }
                                                let layerIndex = '';
                                                for (let i = 0; i < that.$globalConstant.map.style._order.length; i++) {
                                                    if (that.$globalConstant.map.style._order[i].substring(0, 2).indexOf('gl') !== -1) {
                                                        layerIndex = that.$globalConstant.map.style._order[i];
                                                        break
                                                    }
                                                }
                                                that.$globalConstant.map.addLayer({
                                                    "id": 'temp2',
                                                    "source": {
                                                        "type": "geojson",
                                                        "data": feature.features[0]
                                                    },
                                                    "type": "fill",
                                                    "paint": {
                                                        "fill-color": "red"
                                                    }
                                                }, layerIndex);
                                                // let bbPolygon = polygon(feature.features[0].geometry.coordinates);
                                                // let box = bbox(bbPolygon);
                                                // that.$globalConstant.map.fitBounds(box);

                                                let geom = getGeom(feature.features[0]);
                                                let box = bbox(geom);
                                                that.$globalConstant.map.fitBounds(box);
                                                // if(feature.features[0].geometry.type==="MultiPolygon"){
                                                //     let bbPolygon = polygon(feature.features[0].geometry.coordinates);
                                                //     let box = bbox(bbPolygon);
                                                //     that.$globalConstant.map.fitBounds(box);
                                                // }else{
                                                //     let bbPolygon = polygon([feature.features[0].geometry.coordinates[0]]);
                                                //     let box = bbox(bbPolygon);
                                                //     that.$globalConstant.map.fitBounds(box);
                                                // }
                                                let markerHeight = 50, makerRadius = 10, linearOffset = 25;
                                                let html = "<div class='attDiv'><table  class='attTable '>";
                                                let firstRow = "<tr class='el-table__row'>";
                                                for (let i = 0; i < Object.keys(res.body.att).length; i++) {
                                                    if (Object.keys(res.body.att)[i].toString() !== "docId") {
                                                        let th = "<th>" + Object.keys(res.body.att)[i] + "</th>";
                                                        firstRow = firstRow + th;
                                                    }
                                                }
                                                let secondRow = "</tr><tr>";
                                                for (let item in res.body.att) {
                                                    if (item.toString() !== "docId") {
                                                        if (res.body.att[item].toString().length > 10) {
                                                            res.body.att[item] = res.body.att[item].toString().substring(0, 10);
                                                        }
                                                        let th = "<th>" + res.body.att[item] + "</th>";
                                                        secondRow = secondRow + th;
                                                    }
                                                }
                                                html = html + firstRow + secondRow + "</tr></table></div>";
                                                let popupOffset = {
                                                    "top": [0, 0],
                                                    "top-left": [0, 0],
                                                    "top-right": [0, 0],
                                                    "bottom": [0, -markerHeight],
                                                    "bottom-left": [linearOffset, (markerHeight - makerRadius + linearOffset) * -1],
                                                    "bottom-right": [linearOffset, (markerHeight - makerRadius + linearOffset) * -1],
                                                    "left": [makerRadius, (markerHeight - makerRadius) * -1],
                                                    "right": [-makerRadius, (markerHeight - makerRadius) * -1],
                                                };
                                                that.popUp = new mapboxgl.Popup({
                                                    offset: popupOffset,
                                                    className: 'my-class',
                                                    closeOnClick: false
                                                }).setLngLat(e.features[0].geometry.coordinates)
                                                    .setHTML(html)
                                                    .setMaxWidth("500px");
                                                // let popExsist = false;
                                                // for(let item of that.$globalConstant.map._container.childNodes){
                                                //     if(item.className.indexOf('popup')!==-1){
                                                //         popExsist = true;
                                                //     }
                                                // }
                                                // if(popExsist){
                                                //     popup.remove();
                                                // }else{
                                                that.popUp.addTo(that.$globalConstant.map);
                                                // }
                                            }
                                        }).catch(function (error) {
                                        console.log(error);
                                    });
                                } else {
                                    that.$message({
                                        type: 'warning',
                                        message: "请选择查询图层！"
                                    })
                                }


                            }
                        }
                    }
                }

                function createArea(e) {
                    // console.log(that.$globalConstant.map)
                    // let data = draw.getAll();
                    //draw绘制图层时触发的函数
                    // debugger
                    // if (data.features.length > 0) {
                    //     that.draws.push(e);
                    // }
                }

                function deleteArea(e) {
                    // console.log(this.$globalConstant.map.)
                    if (e.features[0].geometry.type === "Point") {
                        if (that.$globalConstant.map.getLayer('temp2')) {
                            that.popUp.remove();
                            that.$globalConstant.map.removeLayer('temp2');
                            that.$globalConstant.map.removeSource('temp2');
                        }
                    } else {
                        let closeTableDialog = [];
                        that.$Bus.$emit('closeTableDialog', closeTableDialog);
                        //判断有高亮的图斑
                        if (that.$globalConstant.map.getLayer('temp')) {

                            let lightPoloygongeom = getGeom(that.$globalConstant.map.getSource('temp')._data);
                            let choosePolygongeom = getGeom(e.features[0]);
                            if (!booleanDisjoint(lightPoloygongeom, choosePolygongeom)) {
                                that.$globalConstant.map.removeLayer('temp');
                                that.$globalConstant.map.removeSource('temp');
                            }

                            //  if (that.$globalConstant.map.getSource('temp')._data.geometry.type === "MultiPolygon") {
                            //      let lightPoloygon = polygon([that.$globalConstant.map.getSource('temp')._data.geometry.coordinates[0][0]]);
                            //      let choosePolygon = polygon([e.features[0].geometry.coordinates[0]]);
                            //      if (!booleanDisjoint(lightPoloygon, choosePolygon)) {
                            //          that.$globalConstant.map.removeLayer('temp');
                            //          that.$globalConstant.map.removeSource('temp');
                            //      }
                            //  }
                            // else {
                            //      let  lightPoloygon = polygon([that.$globalConstant.map.getSource('temp')._data.geometry.coordinates[0]]);
                            //      let choosePolygon = polygon([e.features[0].geometry.coordinates[0]]);
                            //      if (!booleanDisjoint(lightPoloygon, choosePolygon)) {
                            //          that.$globalConstant.map.removeLayer('temp');
                            //          that.$globalConstant.map.removeSource('temp');
                            //      }
                            //  }

                        }
                        // console.log(that.$globalConstant.map.getSource('temp'))
                    }
                    // if(e.features.length===1){
                    //    let showTableDialog=false;
                    //     that.$Bus.$emit('showTableDialog',showTableDialog);
                    // }else{
                    //     let showTableDialog=true;
                    //     that.$Bus.$emit('showTableDialog',showTableDialog);
                    // }

                }

                function updateArea(e) {
                    //draw绘制图层时触发的函数
                    // console.log(e)
                    // debugger
                }

            },
        },

        // beforeCreate(){
        //     if(this.$globalConstant.mapUrl.length !== 0){
        //         let layers = this.$globalConstant.map.getStyle().layers;
        //         this.$globalConstant.map.remove();
        //         for(let layer of this.$globalConstant.mapUrl){
        //             console.log(layer);
        //             console.log(this.$globalConstant.map);
        //             this.$globalConstant.map.addLayer({
        //                 "id": layer.id,
        //                 "type": "raster",
        //                 "source": {
        //                     "type": "raster",
        //                     "tiles": [layer.url],
        //                     "tileSize": 256,
        //                 },
        //             });
        //         }
        //         console.log(this.$globalConstant.map.getStyle().layers);
        //     }
        // },
        created() {
            let that = this;
            this.$Bus.$on("currentLayerName", res => {
                that.currentLayer = res;

            });
            // this.init();
            // this.$Bus.$on('layerNumChange', res => {
            //     if (res === 0) {
            //         this.init();
            //     }
            // })
            // this.$Bus.$on("aaa", res => {
            //     this.init();
            // });
        },
        computed: {},

    }
</script>

<style>
    @import url('../../../static/css/mapbox-gl.css');
    @import url('../../../static/css/mapbox-gl-draw.css');

    .map-overlay {
        font: bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        position: absolute;
        width: 15%;
        top: 0;
        left: 3%;
        padding: 10px;
    }

    .map-overlay .map-overlay-inner {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .map-overlay label {
        display: block;
        margin: 0 0 10px;
    }

    .map-overlay input {
        background-color: transparent;
        display: inline-block;
        width: 100%;
        position: relative;
        margin: 0;
        cursor: ew-resize;
    }

    .map-overlay-inner fieldset {
        border: none;
        padding: 0;
        margin: 0 0 10px;
    }

    .map-overlay-inner fieldset:last-child {
        margin: 0;
    }

    .map-overlay-inner select {
        width: 100%;
    }

    .map-overlay-inner label {
        display: block;
        font-weight: bold;
        margin: 0 0 5px;
    }

    .map-overlay-inner button {
        display: inline-block;
        width: 36px;
        height: 20px;
        border: none;
        cursor: pointer;
    }

    .map-overlay-inner button:focus {
        outline: none;
    }

    .map-overlay-inner button:hover {
        box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.10);
    }

    .mapboxgl-ctrl-icon {
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        display: block;
    }

    .control {
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    }

    .attTable {
        font-family: Verdana, Arial, Sans-Serif;
        font-size: 11px;
        color: #333333;
        border: 1px solid #666666;
        border-collapse: collapse;
        max-width: 300px;
        table-layout: inherit;
        border-radius: 5px;
        width: 100%;
        overflow-x: auto;
    }

    .attTable th {
        text-align: center;
        border: 1px solid #666666;
        background-color: #dedede;
        padding: 8px;
    }

    .attTable td {
        text-align: center;
        border: 1px solid #666666;
        background-color: #ffffff;
        padding: 8px;
    }

    .attDiv {
        max-width: 400px;
        overflow: auto;
    }

    #queryDiv {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 2px rgba(10, 16, 20, .24), 0 0 2px rgba(10, 16, 20, .12);
        box-sizing: border-box;
        transition: box-shadow .5s;
        margin: 0px 8px;
    }
</style>